<template>
  <div class="container">
    <div class="header">
      <div class="left" @click="goBack">
        <van-icon name="arrow-left" size=".16rem" color="#fff"/>
      </div>
      <div class="right">
        <img src="../assets/images/collect3.png" alt @click="collectMethod">
        <img src="../assets/images/share.png" alt @click="shareMethod">
      </div>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- <div class="video" @click="playMethod">
        <video width="100%" height="100%" preload="auto" ref="myVideo" @ended="endedMethod">
          <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">您的浏览器不支持Video标签
        </video>
        <div class="pic" v-if="isShowPlay">
          <img src="../assets/images/play.png" alt>
        </div>
      </div> -->
      <div class="banner"><img :src="initData.logoUrl" alt=""></div>
      <div class="detail">
        <div class="title">
          <div class="name">{{initData.name}}</div>
          <div class="num">
            <van-rate v-model="value" color="#01bf47" :size="22" readonly void-color="#cccccc"/>
          </div>
        </div>
        <div class="subtitle">{{initData.description}}</div>
        <div class="adress">
          <img src="../assets/images/adress2.png" alt>
          <span>{{initData.address}}</span>
        </div>
        <!-- <div class="action">
        <div class="left">
          已评价
          <span>500条</span>
        </div>
        <div class="right">
          <span>查看评价</span>
          <van-icon name="arrow"/>
        </div>
        </div>-->
      </div>
      <div class="tab">
        <div class="list">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul>
              <li
                v-for="(item,index) in initList.list"
                :key="index"
                @click="tofarmDetail(item.farmId)"
              >
                <div class="box_content">
                  <div class="row1">
                    <div class="name">
                      <div class="pic">
                        <img :src="item.product_image_url" alt>
                      </div>
                      <div class="nameText">
                        <span>{{item.product_name}}</span>
                        <div class="classification">
                          <div v-for="(at,eq) in item.keyvalueList" :key="eq">{{at}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row2">{{item.introduction}}</div>
                  <div class="row3">
                    <div class="left">
                      <span>￥{{item.price}}/{{item.product_detail_group_name}}</span>
                    </div>
                    <div class="right">
                      共
                      <span>{{item.join_count}}</span>
                      {{item.product_detail_group_name}}
                    </div>
                  </div>
                </div>
                <div class="box_footer">
                  <div class="box">
                    <div class="title">利润收益</div>
                    <div class="value">{{item.profit_scale*100}}%</div>
                    <div class="line"></div>
                  </div>
                  <div class="box">
                    <div class="title">分利周期</div>
                    <div class="value">{{item.profit_cycle}}个月</div>
                    <div class="line"></div>
                  </div>
                  <div class="box">
                    <div class="title">领回期限</div>
                    <div class="value">{{item.farm_cycle}}天</div>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </div>
      </div>
    </van-pull-refresh>

    <van-popup v-model="shareShow" position="bottom" :overlay="false">
      <ul class="shareShow">
        <li @click="toWxShareAppMessage()">
          <img src="../assets/images/weixin.png"/>
          <p>微信朋友</p>
        </li>
        <li @click="toWxShareTimeline()">
          <img src="../assets/images/weixin.png"/>
          <p>微信朋友圈</p>
        </li>
        <li @click="toWxShareQQ()">
          <img src="../assets/images/weixin.png"/>
          <p>QQ朋友</p>
        </li>
        <li @click="toWxShareQZone()">
          <img src="../assets/images/weixin.png"/>
          <p>QQ空间</p>
        </li>
      </ul>
    <p class="dle" @click="dle()">取消</p>
    </van-popup>




  </div>
</template>

<script>
export default {
  name: "farmIndex",
  data() {
    return {
      //显示评分分数
      value: 0,
      //是否显示视频播放按钮
      isShowPlay: true,
      initData: {},
      initList: {},
      initList_li: [],
      isLoading: false,
      loading: false,
      finished: false,
      pageNum:1,
      user_id:'10426',
      shareShow:false,
    };
  },
  components: {
   // share
  },
  mounted() {
    if(this.$cookies.get('user_id')&&this.$cookies.get('user_id')!=null){
         this.user_id=this.$cookies.get('user_id');
    };
    // if (this.$refs.myVideo.ended) {
    //   this.isShowPlay = true;
    // }
    this.getInitData();
    this.getInitList();   
  },
  methods: {
    //分享
    shareLink(){
      this.shareShow= true;
    },
    dle(){
      this.shareShow= false;
    },
    goBack() {
      this.$router.back();
      // this.$router.push('/');
      // window.history.back();
      // history.go(-1);

    },
    //点击视频，播放/暂停
    playMethod() {
      if (this.$refs.myVideo.paused) {
        this.isShowPlay = false;
        this.$refs.myVideo.play();
      } else {
        this.isShowPlay = true;
        this.$refs.myVideo.pause();
      }
    },
    //判断视频是否播放完成
    endedMethod() {
      this.isShowPlay = true;
    },
    //下拉刷新
    onRefresh() {
      this.getInitData();
      this.getInitList();
    },
    //上拉加载
    onLoad() {
      if(this.initList.list&&this.initList.list.length>0){
        this.getInitList();
      };
    },
    //初始化页面
    async getInitData() {
      let params = {
        shop_Id: this.$route.query.shopId
      };
      const res = await this.$axios.post(this.$api.queryShopId, params);
      if (res.success) {
        this.initData = res.data;
        this.value = parseInt(this.initData.rating / 2);
        this.isLoading = false;
      } else {
        this.initData = {};
        this.$toast(res.msg);
      }
    },
    //初始化页面列表
    async getInitList() {
      let params = {
        pageSize: 10,
        pageNum:this.pageNum,
        shopId: this.$route.query.shopId
      };
      const res = await this.$axios.post(this.$api.queryListByShopId, params);
      if (res.success) {
        if(this.loading){
          this.initList_li=this.initList_li.concat(res.data.list);
          this.initList=res.data;
          this.initList.list=this.initList_li;
          if(this.initList.list.length>=this.initList.total){
            this.finished=true;
          }else{
            this.pageNum++;
          };
        }else{
           this.initList = res.data;
           if(this.initList.list.length>=this.initList.total){
            this.finished=true;
          };
        };
        this.initList.list.forEach((item, index) => {
          item.keyvalueList = item.key_value.split(",");
        });
        this.isLoading = false;
        this.loading = false;
      } else {
        this.initList = {};
        this.$toast(res.msg);
      }
    },
    //收藏
   async collectMethod(){
      let params = {
        user_id:this.user_id,
        shop_id: this.$route.query.shopId,
        language:'zh'
      };
      const res = await this.$axios.post(this.$api.shopCollect, params);
      if (res.success) {
       this.$toast(res.msg);
      } else {
        this.$toast(res.msg);
      }
    },
    //跳转详情页
    tofarmDetail(farmId) {
      this.$router.push({
        path: "./farmDetail",
        query: {
          farmId: farmId,
          shopId: this.$route.query.shopId
        }
      });
    },




   


    shareMethod(){
      let u = navigator.userAgent;
      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      let params={
        url:window.location.href
      };
      if (isAndroid) {
        // window.WebViewJavascriptBridge.callHandler("AndroisVipFun",params,function() {});
      } else if (isiOS) {
        // this.$JsBridge.call('toPayMethod',params,function(response){
        //     alert(response);
        // });
         window.webkit.messageHandlers.toShare.postMessage(params);
      }
    },
    shareMethodBack(message){
      this.$toast(message);
    },

  }
};
</script>

<style scoped>
.banner{
  width:100%;
}
.banner img {
  width:100%;
}
.video {
  width: 100%;
  /* height: 2.25rem; */
  position: relative;
}
.video .pic {
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.video .pic img {
  width: 100%;
  height: 100%;
}
.header {
  position: fixed;
  width: 100%;
  height: 0.44rem;
  left: 0;
  top: 0;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.15rem;
  z-index: 100;
}
.header .right img {
  width: 0.18rem;
  margin-left: 0.16rem;
}
.detail {
  width: 100%;
  padding: 0.15rem 0 0;
  background: #fff;
}
.detail .title {
  padding: 0 0.15rem;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
}
.detail .action {
  width: 100%;
  height: 0.4rem;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eeeeee;
  padding: 0 0.15rem;
}
.detail .action .left {
  font-size: 0.14rem;
  color: #f44736;
}
.detail .action .right {
  height: 100%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  font-size: 0.14rem;
  color: #808080;
}
.detail .action .right span {
  padding-right: 0.12rem;
}
.detail .title .name {
  font-size: 0.16rem;
  color: #010101;
}
.detail .title .num {
  font-size: 0.15rem;
  color: #333333;
}
.detail .title .num span {
  color: #f44736;
}
.detail .subtitle {
  font-size: 0.14rem;
  color: #808080;
  margin-top: 0.12rem;
  padding: 0 0.15rem;
}
.detail .adress {
  padding: 0 0.15rem;
  font-size: 0.12rem;
  color: #01bf47;
  margin-top: 0.1rem;
  padding-bottom: 0.16rem;
}
.detail .adress img {
  width: 0.12rem;
}
.detail .adress span {
  padding-left: 0.06rem;
}
.list {
  padding: 0 0.15rem 0.2rem;
}
.list li {
  background: #fff;
  padding: 0 0.15rem;
  margin-top: 0.08rem;
  border-radius: 0.1rem;
  -webkit-border-radius: 0.1rem;
}
.list .box_content {
  padding: 0.16rem 0 0.16rem;
  border-bottom: 1px solid #f2f2f2;
}
.list .box_content .row1 {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 0.5rem;
}
.list .box_content .row1 .name {
  height: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  align-items: center;
}
.list .box_content .row1 .name img {
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}
.list .box_content .row1 .name .nameText {
  padding-left: 0.17rem;
}
.list .box_content .row1 .name span {
  font-size: 0.15rem;
  color: #333333;
}
.list .box_content .row1 .name .classification {
  display: flex;
  -webkit-display: flex;
  margin-top: 0.05rem;
  flex-wrap: wrap;
}
.list .box_content .row1 .name .classification > div {
  /* width: 0.45rem; */
  height: 0.2rem;
  padding:0 .08rem;
  background: #e4ffeb;
  color: #04b746;
  border-radius: 3px;
  display: flex;
  -webkit-display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.1rem;
  line-height: 0;
}

.list .box_content .row1 .state {
  height: 100%;
}
.list .box_content .row1 .state0 {
  width: 0.73rem;
  height: 100%;
  border: 1px solid #01bf47;
  border-radius: 0.05rem;
}
.list .box_content .row1 .state2 {
  border-color: #f44736;
}
.list .box_content .row1 .state3 {
  border-color: #cccccc;
}
.list .box_content .row1 .state0 .stateText {
  height: 50%;
  width: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.12rem;
  color: #fff;
  background: #01bf47;
}

.list .box_content .row1 .state0 .ps {
  color: #01bf47;
  font-size: 0.12rem;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  height: 50%;
}
.list .box_content .row1 .state2 .stateText {
  background: #f44736;
}
.list .box_content .row1 .state2 .ps {
  color: #f44736;
}
.list .box_content .row1 .state2 .stateText {
  background: #cccccc;
}
.list .box_content .row1 .state2 .ps {
  color: #cccccc;
}
.list .box_content .row2 {
  font-size: 0.12rem;
  color: #808080;
  margin-top: 0.15rem;
}
.list .box_content .row3 {
  font-size: 0.12rem;
  color: #333333;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.14rem;
}
.list .box_content .row3 span {
  color: #f44736;
  font-size: 0.16rem;
}
.list .box_footer {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 0.68rem;
}
.list .box_footer .box {
  width: 33.33%;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.list .box_footer .box .line {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 0.01rem;
  height: 0.24rem;
  background: #f2f2f2;
}
.list .box_footer .box .title {
  font-size: 0.12rem;
  color: #333333;
}
.list .box_footer .box .value {
  color: #f44736;
  font-size: 0.12rem;
  margin-top: 0.1rem;
}
.shareShow{overflow: hidden;width: 100%;border-bottom: 1px solid gainsboro;background-color: #f7f7f7;}
.shareShow li{float: left;width: 25%;}
.shareShow li img{width: 0.4rem;height: 0.4rem;margin: 0.2rem 0.3rem 0;}
.shareShow li p{font-size: 0.12rem;text-align: center;line-height: 0.4rem;}
.dle{line-height: 0.4rem;text-align: center;font-size: 0.16rem;background-color: #f7f7f7;}
</style>



<style>
.van-tab--active {
  color: #01bf47;
}
.van-search .van-cell {
  border-radius: 50px;
  background: #e8e8e8;
}
</style>
